<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="派单部门" prop="sendDeptId">
        <cascader-dept v-model="queryParams.sendDeptId"/>
      </el-form-item>
      <el-form-item label="派单人员" prop="sendUserId">
        <cascader-user v-model="queryParams.sendUserId"/>
      </el-form-item>


      <el-form-item label="产品名称" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入产品名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="产品编码" prop="productCode">
        <el-input
          v-model="queryParams.productCode"
          placeholder="请输入产品编码"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>


      <!--      <el-form-item label="状态" prop="state">-->
      <!--        <el-input-->
      <!--            v-model="queryParams.state"-->
      <!--            placeholder="请输入状态"-->
      <!--            clearable-->
      <!--            @keyup.enter="handleQuery"-->
      <!--            class="!w-240px"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="优先级" prop="priority">

        <el-select
          v-model="queryParams.priority"
          placeholder="请选择优先级"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in getDictOptions(DICT_TYPE.BUSINESS_PRIORITY)"
            :key="dict.value"
            :value="dict.value"
            :label="dict.name"
          />
        </el-select>
      </el-form-item>

      <!--      <el-form-item label="派单人员" prop="deliveryUserId">-->
      <!--        <cascader-user v-model="queryParams.deliveryUserId"/>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="派单时间" prop="deliveryDatetime">-->
      <!--        <el-date-picker-->
      <!--            v-model="queryParams.deliveryDatetime"-->
      <!--            value-format="YYYY-MM-DD HH:mm:ss"-->
      <!--            type="daterange"-->
      <!--            start-placeholder="开始日期"-->
      <!--            end-placeholder="结束日期"-->
      <!--            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
      <!--            class="!w-220px"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="接单时间" prop="takeDatetime">
        <el-date-picker
          v-model="queryParams.takeDatetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="接单人员" prop="takeUserId">
        <cascader-user v-model="queryParams.takeUserId"/>
      </el-form-item>
      <el-form-item label="工单类型" prop="type">
        <el-radio-group v-model="queryParams.type">
          <el-radio-button
            v-for="item in typeList"
            :key="item.type"
            :label="item.type"
          >
            {{ item.type }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审核时间" prop="auditDatetime">
        <el-date-picker
            v-model="queryParams.auditDatetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="分值范围" prop="score">
        <el-input
            v-model.number="queryParams.minScore"
            placeholder="最小值"
            type="number"
            class="!w-100px"
            style="margin-right: 10px"
            min="0"
        />
        <span class="mx-2">至</span>
        <el-input
            v-model.number="queryParams.maxScore"
            placeholder="最大值"
            type="number"
            class="!w-100px"
            min="0"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px"/>
          重置
        </el-button>
        <el-button
          type="primary"
          plain
          @click="handleAdd"
        >

          <Icon icon="ep:plus" class="mr-5px"/>
          新增
        </el-button>
        <el-button
          type="success"
          plain
          @click="handleTakeScattered"
          v-hasPermi="['design:visual-order:takeScattered']"
        >
          <Icon icon="ep:select" class="mr-5px"/>
          接收散图
        </el-button>
        <el-button
          type="success"
          plain
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['design:visual-order:export']"
        >
          <Icon icon="ep:download" class="mr-5px"/>
          导出
        </el-button>

      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>

    <el-tabs v-model="activeName" @tab-change="handleTabChange">
      <el-tab-pane label="待接单" name="wait">
        <el-table
          row-key="id"
          v-loading="loading"
          :data="list"
          :stripe="true"
          :show-overflow-tooltip="true"
          @selection-change="handleRowCheckboxChange"
          border
        >

          <el-table-column label="编号" align="center" prop="id" width="50"/>
          <el-table-column
            label="派单时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            width="170px"
          />
          <el-table-column label="派单人员" align="center" prop="sendUserId_dictText" width="80"/>
          <el-table-column label="派单部门" align="center" prop="sendDeptId_dictText" width="120"/>
          <el-table-column label="产品名称" align="center" prop="productName" min-width="100"/>
          <el-table-column label="产品编码" align="center" prop="productCode" width="100"/>
          <el-table-column label="需求描述" align="center" prop="demandDesc" min-width="250">
            <template #default="scope">
              <!-- 获取纯文本内容（去除HTML标签） -->
              <div v-if="scope.row.demandDesc" :data-full-content="scope.row.demandDesc">
                <!-- 包含图片，显示文字+查看详情按钮 -->
                <template v-if="scope.row.demandDesc.includes('<img')">
                  <el-popover trigger="hover" placement="top" width="400">
                    <template #reference>
                      <el-button type="text">查看图片</el-button>
                    </template>
                    <div v-html="scope.row.demandDesc"></div>
                  </el-popover>
                  <span class="text-content">{{ extractText(scope.row.demandDesc) }}</span>
                </template>
                <!-- 纯文字，直接展示 -->
                <template v-else>
                  <div class="text-content" v-html="scope.row.demandDesc"></div>
                </template>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="需求附件" align="center" prop="demandFile" width="60">
            <template #default="scope">
              <div v-if="!scope.row.demandFile"></div>
              <el-link v-else @click="download.resource(scope.row.demandFile )"
              >下载<i class="el-icon-download  el-icon--left"></i></el-link>
            </template>
          </el-table-column>

          <el-table-column label="需求图片" align="center" prop="demandImg" min-width="100">
            <template #default="scope">
              <image-preview :src="scope.row.demandImg" :multiple="true"/>
            </template>
          </el-table-column>

          <el-table-column label="需求数量" align="center" prop="demandSum" width="80">
            <template #default="scope">
              {{ demandSum(scope.row) }}
            </template>
          </el-table-column>

          <el-table-column label="积分" align="center" prop="score" width="60"/>
          <el-table-column label="工单类型" align="center" prop="type" width="120">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.GENERAL_FORM_MODULE_TYPE" :value="scope.row.type||''"/>
            </template>
          </el-table-column>

          <el-table-column label="优先级" align="center" prop="priority" width="100">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.BUSINESS_PRIORITY" :value="scope.row.priority||''"/>
            </template>
          </el-table-column>
          <el-table-column
            label="派单预计处理完成时间"
            align="center"
            prop="sendEndDatetime"
            :formatter="dateFormatter2"
            width="170px"
          />
          <el-table-column label="操作" align="center" width="200px" fixed="right">
            <template #default="scope">
              <el-button
                type="text"
                @click="handleTake('take',scope.row)"
                v-if="scope.row.type!='视觉-快速散图'"
              >
                接单
              </el-button>
              <el-divider direction="vertical"/>
              <el-button
                type="text"
                @click="handleTake('delivery',scope.row)"
              >
                任务指派
              </el-button>
              <el-divider direction="vertical"/>
              <el-dropdown>
      <span class="el-dropdown-link" style="color: #ff7d1a">
        更多<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
                <!-- Vue3 中使用 #dropdown 插槽代替 slot="dropdown" -->
                <template #dropdown>
                  <el-dropdown-menu>
                    <!-- Vue3 中移除 .native 修饰符 -->
                    <el-dropdown-item @click="handleUpdate(scope.row)">修改</el-dropdown-item>
                    <el-dropdown-item @click="handleDetails(scope.row)">详情</el-dropdown-item>
                    <el-dropdown-item @click="handleClose(scope.row)">作废</el-dropdown-item>
                    <el-dropdown-item @click="handleDelete(scope.row)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>

        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待处理" name="going">
        <el-table
          row-key="id"
          v-loading="loading"
          :data="list"
          :stripe="true"
          :show-overflow-tooltip="true"
          @selection-change="handleRowCheckboxChange"
          border
        >

          <el-table-column label="编号" align="center" prop="id" width="50"/>
          <el-table-column
            label="派单时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            width="170px"
          />
          <el-table-column label="派单人员" align="center" prop="sendUserId_dictText" width="80"/>
          <el-table-column label="派单部门" align="center" prop="sendDeptId_dictText" width="120"/>
          <el-table-column label="产品名称" align="center" prop="productName" min-width="100"/>
          <el-table-column label="产品编码" align="center" prop="productCode" width="100"/>
          <el-table-column label="需求描述" align="center" prop="demandDesc" min-width="250">
            <template #default="scope">
              <!-- 获取纯文本内容（去除HTML标签） -->
              <div v-if="scope.row.demandDesc" :data-full-content="scope.row.demandDesc">
                <!-- 包含图片，显示文字+查看详情按钮 -->
                <template v-if="scope.row.demandDesc.includes('<img')">
                  <el-popover trigger="hover" placement="top" width="400">
                    <template #reference>
                      <el-button type="text">查看图片</el-button>
                    </template>
                    <div v-html="scope.row.demandDesc"></div>
                  </el-popover>
                  <span class="text-content">{{ extractText(scope.row.demandDesc) }}</span>
                </template>
                <!-- 纯文字，直接展示 -->
                <template v-else>
                  <div class="text-content" v-html="scope.row.demandDesc"></div>
                </template>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="需求附件" align="center" prop="demandFile" width="60">
            <template #default="scope">
              <div v-if="!scope.row.demandFile"></div>
              <el-link v-else @click="download.resource(scope.row.demandFile )"
              >下载<i class="el-icon-download  el-icon--left"></i></el-link>
            </template>
          </el-table-column>

          <el-table-column label="需求图片" align="center" prop="demandImg" min-width="100">
            <template #default="scope">
              <image-preview :src="scope.row.demandImg" :multiple="true"/>
            </template>
          </el-table-column>

          <el-table-column label="需求数量" align="center" prop="demandSum" width="80">
            <template #default="scope">
              {{ demandSum(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column label="积分" align="center" prop="score" width="60"/>
          <el-table-column label="工单类型" align="center" prop="type" width="120">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.GENERAL_FORM_MODULE_TYPE" :value="scope.row.type||''"/>
            </template>
          </el-table-column>

          <el-table-column label="优先级" align="center" prop="priority" width="100">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.BUSINESS_PRIORITY" :value="scope.row.priority||''"/>
            </template>
          </el-table-column>
          <el-table-column
            label="派单预计处理完成时间"
            align="center"
            prop="sendEndDatetime"
            :formatter="dateFormatter2"
            width="170px"
          />
          <!--          <el-table-column label="接单">-->
          <!--            <el-table-column label="接单人员" align="center" prop="takeUserId_dictText" width="80"/>-->
          <!--            <el-table-column label="预计完成时间" align="center" prop="takeEndDatetime" width="180">-->
          <!--              <template #default="scope">-->
          <!--                {{ formatDate(scope.row.takeEndDatetime) }}-->
          <!--              </template>-->

          <!--            </el-table-column>-->
          <!--          </el-table-column>-->
          <el-table-column label="接单人员" align="center" prop="takeUserId_dictText" width="80"/>
          <el-table-column label="接单时间" align="center" prop="takeDatetime"
                           :formatter="dateFormatter" width="170px"/>
          <el-table-column label="操作" align="center" width="150px" fixed="right">
            <template #default="scope">
              <el-button
                type="text"
                @click="handleSubmit(scope.row)"
              >完成工单
              </el-button>
              <el-divider direction="vertical"/>
              <el-dropdown>
      <span class="el-dropdown-link" style="color: #ff7d1a">
        更多<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
                <!-- Vue3 中使用 #dropdown 插槽代替 slot="dropdown" -->
                <template #dropdown>
                  <el-dropdown-menu>
                    <!-- Vue3 中移除 .native 修饰符 -->
                    <el-dropdown-item @click="handleUpdate(scope.row)">修改</el-dropdown-item>
                    <el-dropdown-item @click="handleDetails(scope.row)">详情</el-dropdown-item>
                    <el-dropdown-item @click="handleRollback(scope.row)">回退</el-dropdown-item>
                    <el-dropdown-item @click="handleClose(scope.row)">作废</el-dropdown-item>
                    <el-dropdown-item @click="handleDelete(scope.row)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>

        </el-table>
      </el-tab-pane>
      <el-tab-pane label="审核中" name="audit">
        <el-table
          row-key="id"
          v-loading="loading"
          :data="list"
          :stripe="true"
          :show-overflow-tooltip="true"
          @selection-change="handleRowCheckboxChange"
          border
        >

          <el-table-column label="编号" align="center" prop="id" width="50"/>
          <el-table-column
            label="派单时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            width="170px"
          />
          <el-table-column label="派单人员" align="center" prop="sendUserId_dictText" width="80"/>
          <el-table-column label="派单部门" align="center" prop="sendDeptId_dictText" width="120"/>
          <el-table-column label="产品名称" align="center" prop="productName" min-width="100"/>
          <el-table-column label="产品编码" align="center" prop="productCode" width="100"/>
          <el-table-column label="需求描述" align="center" prop="demandDesc" min-width="250">
            <template #default="scope">
              <!-- 获取纯文本内容（去除HTML标签） -->
              <div v-if="scope.row.demandDesc" :data-full-content="scope.row.demandDesc">
                <!-- 包含图片，显示文字+查看详情按钮 -->
                <template v-if="scope.row.demandDesc.includes('<img')">
                  <el-popover trigger="hover" placement="top" width="400">
                    <template #reference>
                      <el-button type="text">查看图片</el-button>
                    </template>
                    <div v-html="scope.row.demandDesc"></div>
                  </el-popover>
                  <span class="text-content">{{ extractText(scope.row.demandDesc) }}</span>
                </template>
                <!-- 纯文字，直接展示 -->
                <template v-else>
                  <div class="text-content" v-html="scope.row.demandDesc"></div>
                </template>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="需求附件" align="center" prop="demandFile" width="60">
            <template #default="scope">
              <div v-if="!scope.row.demandFile"></div>
              <el-link v-else @click="download.resource(scope.row.demandFile )"
              >下载<i class="el-icon-download  el-icon--left"></i></el-link>
            </template>
          </el-table-column>

          <el-table-column label="需求图片" align="center" prop="demandImg" min-width="100">
            <template #default="scope">
              <image-preview :src="scope.row.demandImg" :multiple="true"/>
            </template>
          </el-table-column>
          <el-table-column label="需求数量" align="center" prop="demandSum" width="80">
            <template #default="scope">
              {{ demandSum(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column label="积分" align="center" prop="score" width="60"/>
          <el-table-column label="工单类型" align="center" prop="type" width="120">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.GENERAL_FORM_MODULE_TYPE" :value="scope.row.type||''"/>
            </template>
          </el-table-column>

          <el-table-column label="优先级" align="center" prop="priority" width="100">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.BUSINESS_PRIORITY" :value="scope.row.priority||''"/>
            </template>
          </el-table-column>
          <el-table-column
            label="派单预计处理完成时间"
            align="center"
            prop="sendEndDatetime"
            :formatter="dateFormatter2"
            width="170px"
          />
          <!--          <el-table-column label="接单">-->
          <!--            <el-table-column label="接单人员" align="center" prop="takeUserId_dictText" width="80"/>-->
          <!--            <el-table-column label="预计完成时间" align="center" prop="takeEndDatetime" width="180">-->
          <!--              <template #default="scope">-->
          <!--                {{ formatDate(scope.row.takeEndDatetime) }}-->
          <!--              </template>-->
          <!--            </el-table-column>-->
          <!--          </el-table-column>-->
          <el-table-column label="接单人员" align="center" prop="takeUserId_dictText" width="80"/>
          <el-table-column label="接单时间" align="center" prop="takeDatetime"
                           :formatter="dateFormatter" width="170px"/>
          <el-table-column label="完成工单">
            <el-table-column label="完成附件" align="center" prop="finishFile" width="60">
              <template #default="scope">
                <div v-if="!scope.row.finishFile"></div>
                <el-link v-else @click="download.resource(scope.row.finishFile )"
                >下载<i class="el-icon-download  el-icon--left"></i></el-link>
              </template>
            </el-table-column>

            <el-table-column label="完成图片" align="center" prop="finishImg" min-width="100">
              <template #default="scope">
                <image-preview :src="scope.row.finishImg" :multiple="true"/>
              </template>
            </el-table-column>
            <el-table-column label="完成结果" align="center" prop="finishResult" width="100"/>
            <el-table-column label="交付路径" align="center" prop="finishPath" width="100"  show-overflow-tooltip/>
            <el-table-column label="完成时间" align="center" prop="finishDatetime"
                             :formatter="dateFormatter" width="170px"/>
          </el-table-column>

          <el-table-column label="操作" align="center" width="120px" fixed="right">
            <template #default="scope">
              <el-button
                type="text"
                @click="handleAudit(scope.row)"
              >审核
              </el-button>
              <el-divider direction="vertical"/>
              <el-dropdown>
      <span class="el-dropdown-link" style="color: #ff7d1a">
        更多<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
                <!-- Vue3 中使用 #dropdown 插槽代替 slot="dropdown" -->
                <template #dropdown>
                  <el-dropdown-menu>
                    <!-- Vue3 中移除 .native 修饰符 -->
                    <!--                    <el-dropdown-item @click="handleUpdate(scope.row)">修改</el-dropdown-item>-->
                    <el-dropdown-item @click="handleDetails(scope.row)">详情</el-dropdown-item>
                    <!--                    <el-dropdown-item @click="handleClose(scope.row)">作废</el-dropdown-item>-->
                    <el-dropdown-item @click="handleDelete(scope.row)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>

        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已完成" name="finish">
        <el-table
          row-key="id"
          v-loading="loading"
          :data="list"
          :stripe="true"
          :show-overflow-tooltip="true"
          @selection-change="handleRowCheckboxChange"
          border
        >

          <el-table-column label="编号" align="center" prop="id" width="50"/>
          <el-table-column
            label="派单时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            width="170px"
          />
          <el-table-column label="派单人员" align="center" prop="sendUserId_dictText" width="80"/>
          <el-table-column label="派单部门" align="center" prop="sendDeptId_dictText" width="120"/>
          <el-table-column label="产品名称" align="center" prop="productName" min-width="100"/>
          <el-table-column label="产品编码" align="center" prop="productCode" width="100"/>
          <el-table-column label="需求描述" align="center" prop="demandDesc" min-width="250">
            <template #default="scope">
              <!-- 获取纯文本内容（去除HTML标签） -->
              <div v-if="scope.row.demandDesc" :data-full-content="scope.row.demandDesc">
                <!-- 包含图片，显示文字+查看详情按钮 -->
                <template v-if="scope.row.demandDesc.includes('<img')">
                  <el-popover trigger="hover" placement="top" width="400">
                    <template #reference>
                      <el-button type="text">查看图片</el-button>
                    </template>
                    <div v-html="scope.row.demandDesc"></div>
                  </el-popover>
                  <span class="text-content">{{ extractText(scope.row.demandDesc) }}</span>
                </template>
                <!-- 纯文字，直接展示 -->
                <template v-else>
                  <div class="text-content" v-html="scope.row.demandDesc"></div>
                </template>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="需求附件" align="center" prop="demandFile" width="60">
            <template #default="scope">
              <div v-if="!scope.row.demandFile"></div>
              <el-link v-else @click="download.resource(scope.row.demandFile )"
              >下载<i class="el-icon-download  el-icon--left"></i></el-link>
            </template>
          </el-table-column>

          <el-table-column label="需求图片" align="center" prop="demandImg" min-width="100">
            <template #default="scope">
              <image-preview :src="scope.row.demandImg" :multiple="true"/>
            </template>
          </el-table-column>
          <el-table-column label="需求数量" align="center" prop="demandSum" width="80">
            <template #default="scope">
              {{ demandSum(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column label="积分" align="center" prop="score" width="60"/>
          <el-table-column label="工单类型" align="center" prop="type" width="120">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.GENERAL_FORM_MODULE_TYPE" :value="scope.row.type||''"/>
            </template>
          </el-table-column>

          <el-table-column label="优先级" align="center" prop="priority" width="100">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.BUSINESS_PRIORITY" :value="scope.row.priority||''"/>
            </template>
          </el-table-column>
          <el-table-column
            label="派单预计处理完成时间"
            align="center"
            prop="sendEndDatetime"
            :formatter="dateFormatter2"
            width="170px"
          />
          <!--          <el-table-column label="接单">-->
          <!--            <el-table-column label="接单人员" align="center" prop="takeUserId_dictText" width="80"/>-->
          <!--            <el-table-column label="预计完成时间" align="center" prop="takeEndDatetime" width="180">-->
          <!--              <template #default="scope">-->
          <!--                {{ formatDate(scope.row.takeEndDatetime) }}-->
          <!--              </template>-->

          <!--            </el-table-column>-->
          <!--          </el-table-column>-->
          <el-table-column label="接单人员" align="center" prop="takeUserId_dictText" width="80"/>
          <el-table-column label="接单时间" align="center" prop="takeDatetime"
                           :formatter="dateFormatter" width="170px"/>
          <el-table-column label="完成工单">
            <el-table-column label="完成附件" align="center" prop="finishFile" width="60">
              <template #default="scope">
                <div v-if="!scope.row.finishFile"></div>
                <el-link v-else @click="download.resource(scope.row.finishFile )"
                >下载<i class="el-icon-download  el-icon--left"></i></el-link>
              </template>
            </el-table-column>

            <el-table-column label="完成图片" align="center" prop="finishImg" min-width="100">
              <template #default="scope">
                <image-preview :src="scope.row.finishImg" :multiple="true"/>
              </template>
            </el-table-column>
            <el-table-column label="完成结果" align="center" prop="finishResult" width="100"/>
            <el-table-column label="交付路径" align="center" prop="finishPath" width="100"  show-overflow-tooltip/>
            <el-table-column label="完成时间" align="center" prop="finishDatetime"
                             :formatter="dateFormatter" width="170px"/>
          </el-table-column>
          <el-table-column label="完成工单">
            <el-table-column label="审核人" align="center" prop="auditUserId_dictText" width="60"/>
            <!--            <el-table-column label="审核结果" align="center" prop="auditResult" width="100"/>-->
            <!--            <el-table-column label="审核时间" align="center" prop="auditDatetime"-->
            <!--                             :formatter="dateFormatter" width="170px"/>-->
          </el-table-column>

          <el-table-column label="操作" align="center" width="80px" fixed="right">
            <template #default="scope">
              <el-button
                type="text"
                @click="handleDetails(scope.row)"
              >详情
              </el-button>

            </template>
          </el-table-column>

        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已关闭" name="close">
        <el-table
          row-key="id"
          v-loading="loading"
          :data="list"
          :stripe="true"
          :show-overflow-tooltip="true"
          @selection-change="handleRowCheckboxChange"
          border
        >

          <el-table-column label="编号" align="center" prop="id" width="50"/>
          <el-table-column
            label="派单时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            width="170px"
          />
          <el-table-column label="派单人员" align="center" prop="sendUserId_dictText" width="80"/>
          <el-table-column label="派单部门" align="center" prop="sendDeptId_dictText" width="120"/>
          <el-table-column label="产品名称" align="center" prop="productName" min-width="100"/>
          <el-table-column label="产品编码" align="center" prop="productCode" width="100"/>
          <el-table-column label="需求描述" align="center" prop="demandDesc" min-width="250">
            <template #default="scope">
              <!-- 获取纯文本内容（去除HTML标签） -->
              <div v-if="scope.row.demandDesc" :data-full-content="scope.row.demandDesc">
                <!-- 包含图片，显示文字+查看详情按钮 -->
                <template v-if="scope.row.demandDesc.includes('<img')">
                  <el-popover trigger="hover" placement="top" width="400">
                    <template #reference>
                      <el-button type="text">查看图片</el-button>
                    </template>
                    <div v-html="scope.row.demandDesc"></div>
                  </el-popover>
                  <span class="text-content">{{ extractText(scope.row.demandDesc) }}</span>
                </template>
                <!-- 纯文字，直接展示 -->
                <template v-else>
                  <div class="text-content" v-html="scope.row.demandDesc"></div>
                </template>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="需求附件" align="center" prop="demandFile" width="60">
            <template #default="scope">
              <div v-if="!scope.row.demandFile"></div>
              <el-link v-else @click="download.resource(scope.row.demandFile )"
              >下载<i class="el-icon-download  el-icon--left"></i></el-link>
            </template>
          </el-table-column>

          <el-table-column label="需求图片" align="center" prop="demandImg" min-width="100">
            <template #default="scope">
              <image-preview :src="scope.row.demandImg" :multiple="true"/>
            </template>
          </el-table-column>
          <el-table-column label="需求数量" align="center" prop="demandSum" width="80">
            <template #default="scope">
              {{ demandSum(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column label="积分" align="center" prop="score" width="60"/>
          <el-table-column label="工单类型" align="center" prop="type" width="120">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.GENERAL_FORM_MODULE_TYPE" :value="scope.row.type||''"/>
            </template>
          </el-table-column>

          <el-table-column label="优先级" align="center" prop="priority" width="100">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.BUSINESS_PRIORITY" :value="scope.row.priority||''"/>
            </template>
          </el-table-column>
          <el-table-column
            label="派单预计处理完成时间"
            align="center"
            prop="sendEndDatetime"
            :formatter="dateFormatter2"
            width="170px"
          />
          <!--          <el-table-column label="接单">-->
          <!--            <el-table-column label="接单人员" align="center" prop="takeUserId_dictText" width="80"/>-->
          <!--            <el-table-column label="预计完成时间" align="center" prop="takeEndDatetime" width="180">-->
          <!--              <template #default="scope">-->
          <!--                {{ formatDate(scope.row.takeEndDatetime) }}-->
          <!--              </template>-->

          <!--            </el-table-column>-->
          <!--          </el-table-column>-->
          <el-table-column label="接单人员" align="center" prop="takeUserId_dictText" width="80"/>
          <el-table-column label="接单时间" align="center" prop="takeDatetime"
                           :formatter="dateFormatter" width="170px"/>
          <el-table-column label="完成工单">
            <el-table-column label="完成附件" align="center" prop="finishFile" width="60">
              <template #default="scope">
                <div v-if="!scope.row.finishFile"></div>
                <el-link v-else @click="download.resource(scope.row.finishFile )"
                >下载<i class="el-icon-download  el-icon--left"></i></el-link>
              </template>
            </el-table-column>

            <el-table-column label="完成图片" align="center" prop="finishImg" min-width="100">
              <template #default="scope">
                <image-preview :src="scope.row.finishImg" :multiple="true"/>
              </template>
            </el-table-column>
            <el-table-column label="完成结果" align="center" prop="finishResult" width="100"/>
            <el-table-column label="交付路径" align="center" prop="finishPath" width="100"  show-overflow-tooltip/>
            <el-table-column label="完成时间" align="center" prop="finishDatetime"
                             :formatter="dateFormatter" width="170px"/>
          </el-table-column>
          <el-table-column label="完成工单">
            <el-table-column label="审核人" align="center" prop="auditUserId_dictText" width="60"/>
            <!--            <el-table-column label="审核结果" align="center" prop="auditResult" width="100"/>-->
            <!--            <el-table-column label="审核时间" align="center" prop="auditDatetime"-->
            <!--                             :formatter="dateFormatter" width="170px"/>-->
          </el-table-column>

          <el-table-column label="操作" align="center" width="80px" fixed="right">
            <template #default="scope">
              <el-button
                type="text"
                @click="handleDetails(scope.row)"
              >详情
              </el-button>

            </template>
          </el-table-column>

        </el-table>
      </el-tab-pane>
      <el-tab-pane label="全部数据" name="all">
        <el-table
          row-key="id"
          v-loading="loading"
          :data="list"
          :stripe="true"
          :show-overflow-tooltip="true"
          @selection-change="handleRowCheckboxChange"
          border
        >
          <el-table-column label="工单状态" align="center" prop="state" width="90" fixed="left">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.BUSINESS_FLOW_STATUS" :value="scope.row.state||''"/>
            </template>
          </el-table-column>

          <el-table-column label="编号" align="center" prop="id" width="50"/>
          <el-table-column
            label="派单时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            width="170px"
          />
          <el-table-column label="派单人员" align="center" prop="sendUserId_dictText" width="80"/>
          <el-table-column label="派单部门" align="center" prop="sendDeptId_dictText" width="120"/>
          <el-table-column label="产品名称" align="center" prop="productName" min-width="100"/>
          <el-table-column label="产品编码" align="center" prop="productCode" width="100"/>
          <el-table-column label="需求描述" align="center" prop="demandDesc" min-width="250">
            <template #default="scope">
              <!-- 获取纯文本内容（去除HTML标签） -->
              <div v-if="scope.row.demandDesc" :data-full-content="scope.row.demandDesc">
                <!-- 包含图片，显示文字+查看详情按钮 -->
                <template v-if="scope.row.demandDesc.includes('<img')">
                  <el-popover trigger="hover" placement="top" width="400">
                    <template #reference>
                      <el-button type="text">查看图片</el-button>
                    </template>
                    <div v-html="scope.row.demandDesc"></div>
                  </el-popover>
                  <span class="text-content">{{ extractText(scope.row.demandDesc) }}</span>
                </template>
                <!-- 纯文字，直接展示 -->
                <template v-else>
                  <div class="text-content" v-html="scope.row.demandDesc"></div>
                </template>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="需求附件" align="center" prop="demandFile" width="60">
            <template #default="scope">
              <div v-if="!scope.row.demandFile"></div>
              <el-link v-else @click="download.resource(scope.row.demandFile )"
              >下载<i class="el-icon-download  el-icon--left"></i></el-link>
            </template>
          </el-table-column>

          <el-table-column label="需求图片" align="center" prop="demandImg" min-width="100">
            <template #default="scope">
              <image-preview :src="scope.row.demandImg" :multiple="true"/>
            </template>
          </el-table-column>
          <el-table-column label="需求数量" align="center" prop="demandSum" width="80">
            <template #default="scope">
              {{ demandSum(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column label="积分" align="center" prop="score" width="60"/>
          <el-table-column label="工单类型" align="center" prop="type" width="120">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.GENERAL_FORM_MODULE_TYPE" :value="scope.row.type||''"/>
            </template>
          </el-table-column>

          <el-table-column label="优先级" align="center" prop="priority" width="100">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.BUSINESS_PRIORITY" :value="scope.row.priority||''"/>
            </template>
          </el-table-column>
          <el-table-column
            label="派单预计处理完成时间"
            align="center"
            prop="sendEndDatetime"
            :formatter="dateFormatter2"
            width="170px"
          />
          <!--          <el-table-column label="接单">-->
          <!--            <el-table-column label="接单人员" align="center" prop="takeUserId_dictText" width="80"/>-->
          <!--            <el-table-column label="预计完成时间" align="center" prop="takeEndDatetime" width="180">-->
          <!--              <template #default="scope">-->
          <!--                {{ formatDate(scope.row.takeEndDatetime) }}-->
          <!--              </template>-->

          <!--            </el-table-column>-->
          <!--          </el-table-column>-->
          <el-table-column label="接单人员" align="center" prop="takeUserId_dictText" width="80"/>
          <el-table-column label="接单时间" align="center" prop="takeDatetime"
                           :formatter="dateFormatter" width="170px"/>
          <el-table-column label="完成工单">
            <el-table-column label="完成附件" align="center" prop="finishFile" width="60">
              <template #default="scope">
                <div v-if="!scope.row.finishFile"></div>
                <el-link v-else @click="download.resource(scope.row.finishFile )"
                >下载<i class="el-icon-download  el-icon--left"></i></el-link>
              </template>
            </el-table-column>

            <el-table-column label="完成图片" align="center" prop="finishImg" min-width="100">
              <template #default="scope">
                <image-preview :src="scope.row.finishImg" :multiple="true"/>
              </template>
            </el-table-column>
            <el-table-column label="完成结果" align="center" prop="finishResult" width="100"/>
            <el-table-column label="交付路径" align="center" prop="finishPath" width="100"  show-overflow-tooltip/>
            <el-table-column label="完成时间" align="center" prop="finishDatetime"
                             :formatter="dateFormatter" width="170px"/>
          </el-table-column>
          <el-table-column label="完成工单">
            <el-table-column label="审核人" align="center" prop="auditUserId_dictText" width="60"/>
            <!--            <el-table-column label="审核结果" align="center" prop="auditResult" width="100"/>-->
                        <el-table-column label="审核时间" align="center" prop="auditDatetime"
                                         :formatter="dateFormatter" width="170px"/>
          </el-table-column>

          <el-table-column label="操作" align="center" width="80px" fixed="right">
            <template #default="scope">
              <el-button
                type="text"
                @click="handleDetails(scope.row)"
              >详情
              </el-button>

            </template>
          </el-table-column>

        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <VisualOrderForm ref="formRef" @success="getList"/>
  <AddVisualOrder ref="addVisualOrderRef" @success="getList"/>
  <TakeVisualOrder ref="takeVisualOrderRef" @success="getList"/>
  <DetailsVisualOrder ref="detailsVisualOrderRef" @success="getList"/>
  <SubmitVisualOrder ref="submitVisualOrderRef" @success="getList"/>
</template>

<script setup lang="ts">
import {dateFormatter, dateFormatter2} from '@/utils/formatTime'
import download from '@/utils/download'
import {VisualOrder, VisualOrderApi} from '@/api/business/design/visual'
import VisualOrderForm from './VisualOrderForm.vue'
import AddVisualOrder from './model/AddVisualOrder.vue'
import TakeVisualOrder from './model/TakeVisualOrder.vue'
import DetailsVisualOrder from './model/DetailsVisualOrder.vue'
import SubmitVisualOrder from './model/SubmitVisualOrder.vue'
import {DICT_TYPE, getDictOptions} from '@/utils/dict'
import {hasPermission} from "@/directives/permission/hasPermi";
import {useUserStore} from "@/store/modules/user";
import {ref} from "vue";
import {FormInfoApi} from "@/api/business/general/form";

/** 设计-视觉工单 列表 */
defineOptions({name: 'DesignVisualOrder'})
const userStore = useUserStore()
const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化
const typeList = ref([])
const activeName = ref('wait')
const loading = ref(true) // 列表的加载中
const list = ref<VisualOrder[]>([])
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 30,
  createTime: [],
  type: undefined,
  details: undefined,
  productName: undefined,
  productCode: undefined,
  sendUserId: undefined,
  sendDeptId: undefined,
  sendEndDatetime: [],
  state: '',
  priority: undefined,
  demandDesc: undefined,
  demandImg: undefined,
  demandFile: undefined,
  takeEndDatetime: [],
  deliveryUserId: undefined,
  deliveryDatetime: [],
  takeDatetime: [],
  takeUserId: undefined,
  finishResult: undefined,
  finishImg: undefined,
  finishFile: undefined,
  finishPath:undefined,
  finishDatetime: [],
  outTrackId: undefined,
  auditResult: undefined,
  auditUserId: undefined,
  auditRemark: undefined,
  auditDatetime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const addVisualOrderRef = ref()
const takeVisualOrderRef = ref()
const detailsVisualOrderRef = ref()
const submitVisualOrderRef = ref()

/** 查询列表 */
const getList = async () => {
  loading.value = true
  queryParams.state = activeName.value
  if (activeName.value == 'all') {
    queryParams.state = ''
  }
  try {
    const data = await VisualOrderApi.getVisualOrderPage(queryParams)
    list.value = data.list || []
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const getTypeFormInfo = () => {
  FormInfoApi.getFormInfoPage({module: 'visual'}).then(res => {
    typeList.value = res.list
  })
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  queryParams.minScore =null
  queryParams.maxScore =null
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()


const handleAdd = () => {
  addVisualOrderRef.value.showVisible()
}

const handleTake = async (type: string, row: VisualOrder) => {

  if (type == 'take') {
    takeVisualOrderRef.value.showVisible(type, row)
  } else {
    if (hasPermission(['design:visual-order:admin'])) {
      takeVisualOrderRef.value.showVisible(type, row)
    } else {
      message.error('您没有权限进行此操作');
    }
  }
}

const handleUpdate = (row: VisualOrder) => {
  if (userStore.user.id.toString() == row.sendUserId || hasPermission(['design:visual-order:admin'])) {
    detailsVisualOrderRef.value.showVisible('edit', row)
  } else {
    message.error('您没有权限进行此操作');
  }
}

const handleDetails = (row: VisualOrder) => {
  detailsVisualOrderRef.value.showVisible('info', row)
}


const handleSubmit = async (row: VisualOrder) => {
  if (userStore.user.id.toString() == row.takeUserId || hasPermission(['design:visual-order:admin'])) {
    submitVisualOrderRef.value.showVisible("submit", row)
  } else {
    message.error('您没有权限进行此操作');
  }
}

const handleAudit = async (row: VisualOrder) => {
  if (userStore.user.id.toString() == row.sendUserId || hasPermission(['design:visual-order:admin'])) {
    submitVisualOrderRef.value.showVisible("audit", row)
  } else {
    message.error('您没有权限进行此操作');
  }
}


const handleRollback = async (row: VisualOrder) => {
  if (userStore.user.id.toString() == row.takeUserId || hasPermission(['design:visual-order:admin'])) {
    await message.delConfirm('是否确认回退产品名称为"' + row.productName + '"的数据项？')
    await VisualOrderApi.rollbackVisualInfo(row)
    message.success(t('操作成功'))
    await getList()
  } else {
    message.error('您没有权限进行此操作');
  }
}

const handleClose = async (row: VisualOrder) => {
  if (userStore.user.id.toString() == row.sendUserId || hasPermission(['design:visual-order:admin'])) {
    await message.delConfirm('是否确认关闭产品名称为"' + row.productName + '"的数据项？')
    await VisualOrderApi.closeVisualInfo(row)
    message.success(t('操作成功'))
    await getList()
  } else {
    message.error('您没有权限进行此操作');
  }
}


/** 删除按钮操作 */
const handleDelete = async (row: VisualOrder) => {
  if (userStore.user.id.toString() == row.sendUserId || hasPermission(['design:visual-order:admin'])) {
    await message.delConfirm()
    await VisualOrderApi.deleteVisualOrder(row.id)
    message.success(t('common.delSuccess'))
    await getList()
  } else {
    message.error('您没有权限进行此操作');
  }
}


const checkedIds = ref<number[]>([])
const handleRowCheckboxChange = (records: VisualOrder[]) => {
  checkedIds.value = records.map((item) => item.id!);
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await VisualOrderApi.exportVisualOrder(queryParams)
    download.excel(data, '设计-视觉工单.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

const extractText = (html: string) => {
  if (!html) return ''
  // 创建临时元素用于解析HTML
  const tempDiv = document.createElement('div')
  tempDiv.innerHTML = html
  // 返回文本内容，去除多余空白
  return tempDiv.textContent || tempDiv.innerText || ''
}


const handleTabChange = (name: string) => {
  activeName.value = name
  getList()
}

const handleTakeScattered = async () => {
  await message.confirm('是否确认领取新的散图？')
  await VisualOrderApi.takeScatteredVisualOrder()
  message.success(t('操作成功'))
  await getList()
}


// 定义计算属性
const demandSum = (row) => {
  if (!row || !row.details) return 0;
  try {
    const data = JSON.parse(row.details);
    return data.reduce((sum, item) => sum + (item.demandNum || 0), 0);
  } catch (e) {
    console.error('解析details失败:', e);
    return 0;
  }
};


/** 初始化 **/
onMounted(() => {
  getList()
  getTypeFormInfo()
})
</script>

<style scoped>
:deep(.el-dropdown) {
  vertical-align: middle;
}
</style>
